import React, { Component } from 'react'
import { NavBar,Icon,Tabs, Toast } from 'antd-mobile';
import "./GoodList.scss"
import SearchInput from "../searchInput/SearchInput"
import myaxios from "../../utils/myaxios"
import noImg from "../../assets/images/noImg.jpg"
export default class GoodList extends Component {
  constructor(props){
    super(props);
    // 列表的引用
    this.goodListRef = React.createRef();
    this.pagesize = 10; // 默认返回的每条请求的数量
    this.pagenum = 1; //页码
  }
  state = {
    tabs:[{title:"综合"},{title:"销量"},{title:"价格"}],
    goods:[]
  }
  componentDidMount(){
    console.log(this.props.location);
    let {search} = this.props.location; // ?cid=5
    let params = search.split("?")[1] || "" // cid=5
    let params_arr = params.split("=") || ""; //["cid","5"]
    if(params_arr[0] === "cid"){
      this.cid = params_arr[1]; //this代表GoodList
    }else if(params_arr[0] === "query"){
      this.query = params_arr[1]
    }
    this.getProductList();
    console.log(this)
    // 注册滚动监听的数据
    console.log(this.goodListRef);
    // 当this.goodListRef.current(div.gl-tab-zh)的父元素滚动的时候执行handleScroll函数
    this.goodListRef.current.parentElement.addEventListener("scroll",this.handleScroll)
  }
  // 
  handleScroll = () => {
    let parentElement = this.goodListRef.current.parentElement;
    let clientHeight = parentElement.clientHeight;//元素的高度
    let scrollHeight = parentElement.scrollHeight;//列表的高度
    let scrollTop = parentElement.scrollTop;//列表已经滚动的高度
    if(scrollHeight-clientHeight-scrollTop <= 1.4){
      console.log("触底啦");
      this.getProductList();
    }
  }
  componentWillUnmount(){
    // 卸载监听事件
    this.goodListRef.current.parentElement.removeEventListener(
      "scroll",
      this.handleScroll
    );
  }
  // 获取产品列表数据
  getProductList = () => {
    // 拼接的参数
    let params = {};
    if(this.cid){
      params["cid"] = this.cid
    }
    if(this.query){
      params["query"] = decodeURIComponent(this.query)
    }
    // 如果页码存在
    if(this.total){
      params["pagenum"] = ++this.pagenum;
    }else{
      params["pagenum"] = this.pagenum;
    }
    // 默认十条数据
    params["pagesize"] = this.pagesize;
    console.log(params)
    if(this.pagenum > Math.ceil(this.total / this.pagesize)){
      Toast.info("已经是最后一条数据了",1);
    }else{
      myaxios.get("goods/search",{
        params:params
      }).then((res)=>{
        console.log(res);
        console.log(params)
        this.total = res.total;
        this.pagenum = res.pagenum;
        this.setState({
          goods:[...this.state.goods,...res.goods], //追加数据
        })
      }).catch(err=>console.log(err))
    }
  }
  

  // 点击跳转到商品详情页
  handleItemClick = (goods_id) => {
    this.props.history.push("/goodDetail/"+goods_id)
  }
  
  render() {
    return (
      <div className="yg-gl">
        {/* 首页导航条开始 */}
        <NavBar
          mode="light"
          className='yg-gl-nav'
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}>
          商品列表
        </NavBar>
        {/* 首页导航条结束 */}
        {/* 首页搜索框开始 */}
        <div className="yg-gl-search">
          <SearchInput></SearchInput>
        </div>
        {/* 首页搜索框结束 */}
        {/* tab切换栏开始 */}
        <div className="yg-gl-tab">
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            tabBarUnderlineStyle={{borderColor:"red"}}
            tabBarTextStyle={{fontWeight:"200",color:"black"}}
          >
            <div className="gl-tab-zh" ref={this.goodListRef}>
              {
                this.state.goods.map((v,i)=>{
                  return <div className="tab-zh-item" key={v.goods_id}
                   onClick={this.handleItemClick.bind(this,v.goods_id)}>
                    <div className="zh-item-left">
                      <img src={v.goods_small_logo?v.goods_small_logo:noImg} alt=""/>
                    </div>
                    <div className="zh-item-right">
                      <div className="item-right-top">{v.goods_name}</div>
                      <div className="item-right-bottom">￥{v.goods_price}</div>
                    </div>
                  </div>
                })
              }
            </div>
            <div style={{ height: '150px', backgroundColor: '#fff' }}>
              销量
            </div>
            <div style={{ height: '150px', backgroundColor: '#fff' }}>
              价格
            </div>
          </Tabs>
        </div>
        {/* tab切换栏结束 */}
      </div>
    )
  }
}
